<!-- views/Home.vue -->
<template>
  <view class="container">
	  
		<!-- <uni-nav-bar   height="60px" color="#e0e0f9" backgroundColor="#0000cd"  left-icon="left"  title="我的运单"/> -->
    
	<view class="tab-bar">
      <!-- 选项卡项 -->
      <view 
        class="tab-item" 
        @click="tabClick(0)" 
        :class="{ active: activeIndex === 0 }"
      >
        <text class="tab-text">全部</text>
        <view class="tab-underline" :style="{ width: activeIndex === 0 ? '30px' : '0' }"></view>
      </view>
      <view 
        class="tab-item" 
        @click="tabClick(1)" 
        :class="{ active: activeIndex === 1 }"
      >
        <text class="tab-text">待装车</text>
        <view class="tab-underline" :style="{ width: activeIndex === 1 ? '30px' : '0' }"></view>
      </view>
      <view 
        class="tab-item" 
        @click="tabClick(2)" 
        :class="{ active: activeIndex === 2 }"
      >
        <text class="tab-text">待卸车</text>
        <view class="tab-underline" :style="{ width: activeIndex === 2 ? '30px' : '0' }"></view>
      </view>
      <view 
        class="tab-item" 
        @click="tabClick(3)" 
        :class="{ active: activeIndex === 3 }"
      >
        <text class="tab-text">已卸车</text>
        <view class="tab-underline" :style="{ width: activeIndex === 3 ? '30px' : '0' }"></view>
      </view>
      <view 
        class="tab-item" 
        @click="tabClick(4)" 
        :class="{ active: activeIndex === 4 }"
      >
        <text class="tab-text">已收款</text>
        <view class="tab-underline" :style="{ width: activeIndex === 4 ? '30px' : '0' }"></view>
      </view>
      <view 
        class="tab-item" 
        @click="tabClick(5)" 
        :class="{ active: activeIndex === 5 }"
      >
        <text class="tab-text">已取消</text>
        <view class="tab-underline" :style="{ width: activeIndex === 5 ? '30px' : '0' }"></view>
      </view>
    </view>
    <!-- 订单部分 -->
    <view class="shou3">
      <!-- 全部内容 -->
      <view v-if="activeIndex === 0" class="shou1">
        <view class="zx1">
          <view class="left-section">
            <image src="/static/wen.png" style="width: 40rpx; height: 40rpx;"></image>
            <text class="ru" style="margin-left: 10rpx;">全部订单</text>
          </view>
          <view class="right-section">
            <text>全部</text>
          </view>
        </view>
        <view class="bu">
          <uni-section>
            <uni-steps class="bu1" :options="list2" active-color="#000000" :active="active" direction="column" />
          </uni-section>	
        </view>
        <view class="jin">
          <uni-section>
            <uni-easyinput class="jin1" disabled value="直采-zzt5000"></uni-easyinput>
          </uni-section>
        </view>
        <view class="an">
          <button class="mini-btn">再抢一单</button>
        </view>
      </view>

      <!-- 待装车内容 -->
      <view v-if="activeIndex === 1" class="shou1">
        <view class="zx1">
          <view class="left-section">
            <image src="/static/wen.png" style="width: 40rpx; height: 40rpx;"></image>
            <text class="ru" style="margin-left: 10rpx;">待装车页面</text>
          </view>
          <view class="right-section">
            <text>待装车</text>
          </view>
        </view>
        <view class="bu">
          <uni-section>
            <uni-steps class="bu1" :options="list2" active-color="#000000" :active="active" direction="column" />
          </uni-section>	
        </view>
        <view class="jin">
          <uni-section>
            <uni-easyinput class="jin1" disabled value="直采-zzt5000"></uni-easyinput>
          </uni-section>
        </view>
        <view class="an">
          <button class="mini-btn">再抢一单</button>
        </view>
      </view>

      <!-- 待卸车内容 -->
      <view v-if="activeIndex === 2" class="shou1">
        <view class="zx1">
          <view class="left-section">
            <image src="/static/wen.png" style="width: 40rpx; height: 40rpx;"></image>
            <text class="ru" style="margin-left: 10rpx;">待卸车页面</text>
          </view>
          <view class="right-section">
            <text>待卸车</text>
          </view>
        </view>
        <view class="bu">
          <uni-section>
            <uni-steps class="bu1" :options="list2" active-color="#000000" :active="active" direction="column" />
          </uni-section>	
        </view>
        <view class="jin">
          <uni-section>
            <uni-easyinput class="jin1" disabled value="直采-zzt5000"></uni-easyinput>
          </uni-section>
        </view>
        <view class="an">
          <button class="mini-btn">再抢一单</button>
        </view>
      </view>

      <!-- 已卸车内容 -->
      <view v-if="activeIndex === 3" class="shou1">
        <view class="zx1">
          <view class="left-section">
            <image src="/static/wen.png" style="width: 40rpx; height: 40rpx;"></image>
            <text class="ru" style="margin-left: 10rpx;">已卸车页面</text>
          </view>
          <view class="right-section">
            <text>已卸车</text>
          </view>
        </view>
        <view class="bu">
          <uni-section>
            <uni-steps class="bu1" :options="list2" active-color="#000000" :active="active" direction="column" />
          </uni-section>	
        </view>
        <view class="jin">
          <uni-section>
            <uni-easyinput class="jin1" disabled value="直采-zzt5000"></uni-easyinput>
          </uni-section>
        </view>
        <view class="an">
          <button class="mini-btn">再抢一单</button>
        </view>
      </view>

      <!-- 已收款内容 -->
      <view v-if="activeIndex === 4" class="shou1">
        <view class="zx1">
          <view class="left-section">
            <image src="/static/wen.png" style="width: 40rpx; height: 40rpx;"></image>
            <text class="ru" style="margin-left: 10rpx;">已收款页面</text>
          </view>
          <view class="right-section">
            <text>已收款</text>
          </view>
        </view>
        <view class="bu">
          <uni-section>
            <uni-steps class="bu1" :options="list2" active-color="#000000" :active="active" direction="column" />
          </uni-section>	
        </view>
        <view class="jin">
          <uni-section>
            <uni-easyinput class="jin1" disabled value="直采-zzt5000"></uni-easyinput>
          </uni-section>
        </view>
        <view class="an">
          <button class="mini-btn">再抢一单</button>
        </view>
      </view>

      <!-- 已取消内容 -->
      <view v-if="activeIndex === 5" class="shou1">
        <view class="zx1">
          <view class="left-section">
            <image src="/static/wen.png" style="width: 40rpx; height: 40rpx;"></image>
            <text class="ru" style="margin-left: 10rpx;">已取消页面</text>
          </view>
          <view class="right-section">
            <text>已取消</text>
          </view>
        </view>
        <view class="bu">
          <uni-section>
            <uni-steps class="bu1" :options="list2" active-color="#000000" :active="active" direction="column" />
          </uni-section>	
        </view>
        <view class="jin">
          <uni-section>
            <uni-easyinput class="jin1" disabled value="直采-zzt5000"></uni-easyinput>
          </uni-section>
        </view>
        <view class="an">
          <button class="mini-btn">再抢一单</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 定义响应式变量 activeIndex
    const activeIndex = ref(0);

    // 定义列表数据
    const list1 = ref([
      { title: '事件一' },
      { title: '事件二' },
    ]);

    const list2 = ref([
      { title: 'gg-侯村乡龙角山龙城森林公园' },
      { title: '郭志华-龙城森林公园' }
    ]);

    // 定义 active 步骤索引
    const active = ref(0);

    // 点击选项卡时更新 activeIndex
    const tabClick = (index) => {
      activeIndex.value = index;
      active.value = 0; // 重置步骤索引
    };

    // 改变 active 状态的方法
    const change = () => {
      if (active.value < list1.value.length - 1) {
        active.value += 1;
      } else {
        active.value = 0;
      }
    };

    return {
      activeIndex,
      list1,
      list2,
      active,
      tabClick,
      change
    };
  }
};
</script>

<style scoped>
.an {
  margin-left: 470rpx;
  margin-top: 20rpx;
}
.mini-btn {
  color: white;
  background-color: #4f77fd;
  width: 200rpx;
  height: 80rpx;
  border-radius: 50rpx;
  font-size: 30rpx;
  margin-top: 20rpx;
}
.jin1 {
  margin-top: -30rpx;
}
.jin {
  margin-left: 50rpx;
  width: 620rpx;
}
.bu1 {
  margin-top: -60rpx;
}
.zx1 {
  margin-left: 20rpx;
  height: 100rpx;
  border-bottom: 1px solid #d9d9d9;
}
.xiao {
  display: flex;
}
.shou3 {
  display: flex;
  justify-content: space-between;
  background-color: #f0f0f0; /* 设置容器背景颜色以便观察效果 */
  height: 1120rpx;
  margin-top: 88rpx; /* 确保内容不被导航栏遮挡 */
}
.shou1 {
  display: flex;
  flex-direction: column; /* 改为列布局 */
  justify-content: flex-start; /* 确保子元素从顶部开始 */
  align-items: flex-start; /* 确保子元素左对齐 */
  background-color: #FFFFFF;
  margin-left: 30rpx;
  margin-top: 20rpx;
  width: 700rpx;
  height: 500rpx;
  border-radius: 15rpx; /* 添加圆角效果，可以根据需要调整数值 */
  border-bottom: 1rpx solid #ccc; /* 添加下边框 */
}
.left-section {
  display: flex;
  align-items: center;
  margin-top: 30rpx;
  margin-left: 20rpx;
  color: #8f8f90;
}
.right-section {
  display: flex;
  justify-content: flex-end; /* 确保“已取消”在右边 */
  width: 660rpx;
  margin-top: -45rpx;
  color: #d9d9d9;
}
.bu {
  margin-top: -40rpx;
  padding-bottom: -20rpx;
  width: 680rpx;
}
.container {
  background-color: #fff;
}
.tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #0000CD;
  height: 60px;
  /* margin-top: 88rpx; *//* 确保选项卡不被导航栏遮挡 */
}
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  cursor: pointer; /* 添加鼠标悬停效果 */
}
.tab-item.active .tab-underline {
  width: 30px;
}
.tab-text {
  font-size: 16px;
}
.tab-underline {
  height: 3px;
  background-color: #fff;
  transition: width 0.3s;
  width: 0;
  margin-top: 5px;
}
</style>